<template>
  <div>
    <div>
      <div class="avatar">
        <img :src="zmImg">
      </div>
      <div class="html" v-html="html">

      </div>
    </div>
    <footer class="form-footer">
      <button class="return hairlines-top" @click="back"><i class="iconfont icon-return2"></i>返回</button>
      <input class="next" type="button" value="同意授权" @click="toNext">
    </footer>
  </div>
</template>
<script>
  import zmImg from './img/ZMauthorize.png'
  export default {
    name: 'ZMauthorize',
    data () {
      return {
        title: '验证芝麻分',
        zmImg: zmImg,
        html: '您点击“同意授权”按钮接受如下内容：'
      }
    },
    methods: {
      back () {
        this.$router.go(-1)
      },
      toNext () {
        this.$store.commit('profileStepSet', 7)
        this.$router.push('/profile/step7')
      }
    },
    created () {
      this.setTitle(this.title)
      this.api.getZMContract((result) => {
        this.html = result
      })
    }
  }
</script>
<style lang="scss" scoped>
  @import '../../../styles/form.scss';
  .avatar{
    padding-top: rem(70);
    border-bottom: 2px solid #00c182;
    img{
      display: block;
      margin: 0 auto rem(60) auto;
      width: rem(343);
      height: rem(102);
    }
  }
  .html{
    padding: rem(30) rem(24) rem(100);
    font-size: rem(28);
    color: #999;
  }
  .form-footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
</style>

